<template>
    <div class="number">
        <div class="left" @click="subtract">-</div>
        <div class="center">{{countObj.count}}</div>
        <div class="right" @click="add">+</div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                //设置默认的值 
                countObj:{count:0,type:'add',goodsid:0}
            }
        },
        created(){
            // alert(this.countObj. count);
            //在进入的时候，拿到按钮里面的值
            this.countObj.count = this.initcount;
            this.countObj.goodsid = this.goodsid;
        },
        methods:{
            // 自减
            subtract(){
                if( this.countObj.count >1){
                     this.countObj.count --;
                 }else{
                    this.countObj.count =1;
                 }
                //通过返回去一个对象  
                //添加一个类型
                this.countObj.type = 'substrict';
                this.emit();
            },
            // 自增
            add(){
                this.countObj.count ++;
                this.countObj.type = 'add';
                this.emit();
            },
            emit(){
                  this.$emit('count',this.countObj);
            }
        },
        props:['initcount','goodsid']
    }
</script>
<style scoped>
    .number{
        overflow: hidden;
        width: 100px;
        display: inline-block;
        margin-left: 10px;
        vertical-align: middle;
    }
    .left,.center,.right{
        line-height: 30px;
        text-align: center;
        width: 30px;
        height:30px;
        background: #ccc;
        float: left;
        border:1px solid #ddd;
    }
</style>